import { Tag, TagProps } from 'antd';
import { useEffect, useState } from 'react';

import DictionarySubDataService from '@/api/services/setting/DictionarySubDataService';
import { SubDictionariesData } from '@/pages/setting/dictionary/sub-data/type';

export interface DictTagProps extends Omit<TagProps, any> {
  dictDataKey: string;
}
export function DictTag({ dictDataKey }: DictTagProps) {
  const [dictData, setDictData] = useState<SubDictionariesData>();
  useEffect(() => {
    if (dictDataKey && dictDataKey !== '-') {
      DictionarySubDataService.get(dictDataKey).then((data) => {
        setDictData(data);
      });
    }
  }, [dictDataKey]);
  return (
    <Tag key={dictData?.id || dictDataKey} color="cyan">
      {dictData?.value || dictDataKey}
    </Tag>
  );
}
